<template>
	<view class="zui-code">
		<view class="btn_box" v-if="type == 1">
			<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
			<button class="anBtn" @tap="getCode">{{ tips }}</button>
		</view>
		<view class="btn_box2" v-if="type == 2">
			<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
			<button class="anBtn" @tap="getCode">{{ tips }}</button>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		mobile: {
			type: String,
			default: ''
		},
		scene: {
			type: String,
			default: 'register' //默认注册
		},
		type: {
			type: String,
			default: '1'
		},
		fun: {
			type: Function,
			default: () => {
				return Function;
			}
		}
	},
	data() {
		return {
			tips: ''
		};
	},
	onLoad(e) {},
	created: function() {},
	methods: {
		do_fun() {
			this.xz_once(() => {
				console.log('内部调用了', this.fun);
				this.fun();
			}, 1000);
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			console.log(this.mobile);
			if (!this.mobile) return uni.$u.toast('请输入手机号');
			if (!/^1[0-9]{10}$/.test(this.mobile)) return uni.$u.toast('请输入正确的手机号');
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在发送...'
				});
				uni.$u.http
					.post(
						'/app/sms/sendSms',
						{
							mobile: this.mobile,
							scene: this.scene
						},
						{
							custom: {
								auth: false,
								toast: true,
								catch: true
							}
						}
					)
					.then(res => {
						uni.hideLoading();
						console.log('注册', res);
						this.$refs.uCode.start();
					})
					.catch(err => {
						uni.hideLoading();
						console.log('处理', err);
					});
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.zui-code {
	.btn_box {
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		box-sizing: border-box;
		margin: 0 auto;
		.anBtn {
			height: 100rpx;
			line-height: 100rpx;
			background: #f1b863;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			transform: scale(1);
			transition: all 0.25s;
			font-weight: bold;
		}
		.anBtn:active {
			transform: scale(0.9);
			background: #504764;
		}

		.anBtn::after {
			border: 0;
		}

		.anBtn[disabled] {
			color: #fff;
			background: #504764;
		}
		.anBtn[disabled]:active {
			transform: scale(1);
			color: #fff;
			background: #504764;
		}
		.anBtn[disabled]:not([type]) {
			transform: scale(1);
			color: #fff;
			background: #504764;
		}
	}

	.btn_box2 {
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		box-sizing: border-box;
		margin: 0 auto;
		.anBtn {
			height: 52rpx;
			line-height: 52rpx;
			background: transparent;
			color: #ffe5a5;
			font-size: 28rpx;
			transform: scale(1);
			transition: all 0.25s;
			font-weight: bold;
			border-radius: 16rpx;
			border: 1px solid #ffe5a5;
		}
		.anBtn:active {
			transform: scale(0.9);
			background: #504764;
		}

		.anBtn::after {
			border: 0;
		}

		.anBtn[disabled] {
			color: #fff;
			background: #504764;
		}
		.anBtn[disabled]:active {
			transform: scale(1);
			color: #fff;
			background: #504764;
		}
		.anBtn[disabled]:not([type]) {
			transform: scale(1);
			color: #fff;
			background: #504764;
		}
	}
}
</style>
